<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>融云测试</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			body{
				background: #f5f5f5;
			}
			
			#chat {
				width: 100%;
				overflow-y: auto;
				padding-top: 20px;
				padding-bottom: 30px;
				box-sizing: border-box;
				-webkit-overflow-scrolling: touch;
			}
			
			.chat_list {
				width: 100%;
				padding: 0 10px 20px;
				position: relative;
				box-sizing: border-box;
			}
			
			.head_photo {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				overflow: hidden;
				box-sizing: border-box;
			}
			
			.head_photo img {
				width: 100%;
			}
			
			.chat_conten {
				max-width: 70%;
				margin: 0 20px;
				font-size: 16px;
				line-height: 25px;
				background: white;
				border-radius: 5px;
				padding: 5px 10px;
				box-sizing: border-box;
				white-space:normal;
				word-break:break-all;
			}
			
			.chat_conten img {
				max-width: 100%;
			}
			
			.Triangle_left {
				position: absolute;
				left: 54px;
				top: 8px;
				width: 0;
				height: 0;
				border-right: 6px solid white;
				border-top: 5px solid transparent;
				border-bottom: 5px solid transparent;
			}
			
			.Triangle_right {
				position: absolute;
				right: 54px;
				top: 8px;
				width: 0;
				height: 0;
				border-left: 6px solid white;
				border-top: 5px solid transparent;
				border-bottom: 5px solid transparent;
			}
			
			.clear {
				clear: both
			}
			
			.input_in {
				width: 100%;
				height: 50px;
				box-sizing: border-box;
				padding: 10px 5px;
				background: #f5f5f5;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			
			#contain {
				width: 80%;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				padding-left: 5px;
				box-sizing: border-box;
				border: 1px solid #aaa;
				outline: none;
				/*word-wrap:break-word;*/
			}
			#sum {
				width: 15%;
				height: 30px;
				text-align: center;
				line-height: 30px;
				background: dodgerblue;
				color: white;
				border-radius: 6px;
				margin-left: 5px;
				box-sizing: border-box;
				border-width: 0;
				outline: none;
			}
			
			.lf {
				float: left;
			}
			
			.rf {
				float: right;
			}
		</style>
	</head>

	<body>
		<div id="chat">
			<div class="chat_list">
				<div class="head_photo lf">
					<img src="img/dog5.png" />
				</div>
				<div class="chat_conten lf">
					<div class="Triangle_left"></div>
					<p>这是聊天内容这是聊天内容这是聊天内容</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="chat_list">
				<div class="head_photo lf">
					<img src="img/dog5.png" />
				</div>
				<div class="chat_conten lf">
					<div class="Triangle_left"></div>
					<p>这是聊天内容聊天内容这是聊天内容聊天内容这是聊天内容聊天内容</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="chat_list">
				<div class="head_photo lf">
					<img src="img/dog5.png" />
				</div>
				<div class="chat_conten lf">
					<div class="Triangle_left"></div>
					<p>这是聊天内容这是聊天</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="chat_list">
				<div class="head_photo lf">
					<img src="img/dog5.png" />
				</div>
				<div class="chat_conten lf">
					<div class="Triangle_left"></div>
					<p>这是聊天内容这是聊天内容这是聊天内容这是聊天内容这是聊天内容这是聊天内容</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="chat_list">
				<div class="head_photo lf">
					<img src="img/dog5.png" />
				</div>
				<div class="chat_conten lf">
					<div class="Triangle_left"></div>
					<p>这是聊天内容聊天内容这是聊天内容聊天内容这是聊天内容聊天内容</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="chat_list">
				<div class="head_photo lf">
					<img src="img/dog5.png" />
				</div>
				<div class="chat_conten lf">
					<div class="Triangle_left"></div>
					<p>这是聊天内容这是聊天内容这是聊天内容这是聊天内容这是聊天内容这是聊天内容</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="chat_list">
				<div class="head_photo lf">
					<img src="img/dog5.png" />
				</div>
				<div class="chat_conten lf">
					<div class="Triangle_left"></div>
					<p>这是聊天内容聊天内容这是聊天内容聊天内容这是聊天内容聊天内容</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="chat_list">
				<div class="head_photo lf">
					<img src="img/dog5.png" />
				</div>
				<div class="chat_conten lf">
					<div class="Triangle_left"></div>
					<p>这是聊天内容这是聊天</p>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="input_in">
			<input type="text" name="contain" id="contain" value="" placeholder="说点什么..." />
			<input type="button" name="sum" id="sum" value="发送" onclick="getMessage()" />
		</div>
		<script src="http://cdn.ronghub.com/RongIMLib-2.2.5.min.js"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>